
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/page/base.jsp"%>

<html>
	<head>
		<base href="<%=basePath%>"></base>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<!-- Libraries -->
		<link type="text/css" href="<%=path%>/manage/css/layout.css"
			rel="stylesheet" />
		<link type="text/css" href="<%=path%>/manage/css/new_style.css"
			rel="stylesheet" />
		<script type="text/javascript"
			src="<%=path%>/manage/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/manage/js/jquery-ui-1.8.11.custom.min.js"></script>

		<style>
.test {width; 20px;
	height: 15px;
}

.btn_delete {
	float: right;
	margin: 7px 5px 4px;
	width: 26px;
	height: 26px;
	background: url(<%=path%>/manage/images/btn_delete.png) 0 0 no-repeat;
	cursor: pointer;
	border: none;
}

.btn_delete:hover {
	background: url(<%=path%>/manage/images/btn_delete_hover.png) 0 0
		no-repeat;
}

.modename {
	margin: 10px;
	vertical-align: middle
}

.modeimg {
	vertical-align: middle
}

.btn_preview{
	display: block; width: 45px; height: 45px; margin: 0 auto; background: url(<%=path %>/manage/images/btn_preview.png) 0 0 no-repeat;cursor:pointer;
}
.btn_preview:hover{
	 background: url(<%=path %>/manage/images/btn_preview_hover.png) 0 0 no-repeat;
}
</style>
		<script type="text/javascript">
	//定义7位数组  数组的循序就是页面的循序 
	var mycars = new Array('-1', '-1', '-1', '-1', '-1', '-1', '-1');
	//溢出数据
	function removeModule(id) {
		$("#" + id + "").html("");
		mycars.splice(id, 1, "-1");
		
	}

	function saveModule() {
		var str = "";
		for ( var i = 0; i < mycars.length; i++) {
		if(mycars[i]=='-1'){
		// mycars.splice(i,1);
		}else{
			str += mycars[i] + ",";
		}
		}
		
		$.ajax({
			url : root + '/dataBinding/updateModule.action',
			method : 'post',
			dataType : 'json',
			data : {
				'modules' : str,
				'intCateId' : $("#intCateId").val()
			},
			success : function(data) {
		
			 window.location.href=root+'/dataBinding/goAddContentModule.action';			
			},
			error : function(err) {
				if (err.responseText != '')
					alert(err.responseText);
				else
					alert("请求失败！");
			}
		});
	}
	//预览数据
	function preModule() {
		var str = "";
		for ( var i = 0; i < mycars.length; i++) {
		if(mycars[i]=='-1'){
		// mycars.splice(i,1);
		}else{
			str += mycars[i] + ",";
		}
		}
		
		window.open('<%=path%>/dataBinding/goPreViewDetail.action?modules='+str,'预览信息','location=no,menubar=no,scrollbars=yes,resizable=yes,width=900px,top=0px,left=100px');
	}
</script>
	</head>

	<body>

		<div>
			<p class="sitemap">
				当前位置：详情页面模块管理 > 详情模块编辑
			</p>
			<h1>
				详情模块编辑
			</h1>

			<div>
				<div class="choicebox">
					<p
						style="font-size: 14px; color: #333; margin: 5px 0 10px 10px; font-weight: bold;">
						模块选择
					</p>
					<s:hidden name="intCateId" id="intCateId"></s:hidden>
					<!-- 动态生成拖动的对象 -->
					<s:iterator value="pageMpoduleList" status="st">
						<div id="div${intPageModuleId}">
							<img src="<%=path%><s:property value="varPageImgUrl"/>"
								width="100%" height="100%" />
							<s:hidden name="varPageModuleName" id="module%{intPageModuleId}"></s:hidden>
						</div>
						<script>
	$(function() {
		$("#div${intPageModuleId}").draggable({
			grid : [ 5, 5 ],
			revert : true,
			revertDuration : 1000,
			//handle : "h2",
			//helper : "clone",
			//helper: function(event){

			// return $( "<div class='ui-widget-header' div=\"div<s:property value="intPageModuleId"/>\"  style=\"width:35px;height:30px;z-index:23\"]><s:property value="varPageModuleName"/></div>" );

			// },
			start : function(event, ui) {
			},
			stop : function(event, ui) {
				$(this).css({
					"width" : "84px",
					"height" : "111px"
				});
			}
		});
	});
</script>
					</s:iterator>
                <div style="clear:both;height:0;"></div> 
				<div style="margin:70px 0 0 300px;text-align: center; border: none;height:auto;width:auto;">
                		<input type="button" class="button" value="保存编辑效果"  onClick="saveModule()" >
					<!--	<a href="javascript:saveModule()" >保存</a>-->
				</div>
				</div>


				<!-- 预览区 -->
				<div class="mobilebox">					
					<s:iterator value="pageMpoduleList" status="st">
						<div id="<s:property value="#st.index" />">
						</div>
						<script>
	$("#<s:property value="#st.index" />")
			.droppable(
					{
						tolerance : "pointer",
						activate : function(event, ui) {
							// 开始拖动时 激活事件
							//获取拖动的div
							idd = ui.helper.attr('id');
							// 将拖动的div缩小
							$("#" + idd + "").css({
								"width" : "30px",
								"height" : "35px"
							});
						},
						over : function(event, ui) {

						},
						out : function(event, ui) {

						},
						drop : function(event, ui) {

							//获取拖动的div
							var dragId = ui.helper.attr('id');
							
							//数据ID
							var idd = dragId.replace("div", "");

							$("#" + dragId + "").css({
								"width" : "84px",
								"height" : "111px"
							});
							
							//获拖放地的div
							var id = $(this).attr('id');
							//获取div下面的img数据
							var img = $("#" + dragId + "").find("img").attr(
									"src");

						

							//拖动结束后给div赋值
							$("#" + id + "")
									.html(
											"<img  class=\"modeimg\" src="+img+" width=\"45\" height=\"35\"/ style=\"verttical-align:middle\">"
													+ "<span class=\"modename\" >"
													+ $("#module" + idd + "")
															.val()
													+ "</span>"
													+ "<input class=\"btn_delete\" type=\"button\" value=\" \" onclick=\"removeModule("
													+ id + ");\"/>");

							//如果有数据 这删除
							for ( var i = 0; i < mycars.length; i++) {
								if (mycars[i] == idd) {
									mycars[i] = "-1";
								}
							}
							mycars.splice(id, 1, idd);
							

						}
					});
</script>
					</s:iterator>
					<div style="margin-top:10px;text-align: center; border: none">
						<a href="javascript:preModule()" class="btn_preview" ></a>
					</div>
				</div>
                <div style="clear:both"></div>
                
			</div>

		</div>
	</body>
</html>

